<!--
    @author: crissy-月下闲人
-->

<script lang="ts" setup>
import { toSearchAPI, toFindByIdAPI, toDeleteByIdAPI } from "@/http/api/message"
import { computed, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

interface User {
    name: string,
    age: number,
    sex: string,
    phone: string,
    idNumber: string,
    email: string,
    address: string
}

const search = ref('')
const filterTableData = computed(() =>
    tableData.value.filter(
        (data) =>
            !search.value ||
            data.name.toLowerCase().includes(search.value.toLowerCase())
    )
)
const handleEdit = (index: number, row: User) => {
    if (localStorage.getItem('Power') == 'crissy_777') {
        ElMessageBox.confirm(
            '删除的数据无法恢复，是否确认删除？',
            'Warning',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }
        )
            .then(() => {
                toDeleteByIdAPI(row.id).then(res => {
                    if (res.code == 200) {
                        tableData.value.splice(index, 1)
                        ElMessage({
                            type: 'success',
                            message: '删除成功！',
                        })
                    }
                }).catch(err => {
                    ElMessage({
                        type: 'error',
                        message: '删除失败，网络错误！',
                    })
                })
            })
    }
    else {
        ElMessage({
            type: 'warning',
            message: ' 权限不足，无法删除！',
        })
    }
}

let dataInfo = ref([]);
const handleDelete = (index: number, row: User) => {
    if (localStorage.getItem('Power') == 'crissy_777') {
        toFindByIdAPI(row.id).then(res => {
            dataInfo.value = dataInfo.value.concat(res.data);
            dialogVisible.value = true;
        }).catch(err => {
            ElMessage({
                type: 'error',
                message: '查询失败，网络错误！',
            })
        })
    }
    else {
        ElMessage({
            type: 'warning',
            message: ' 权限不足，无法查看！',
        })
    }
}

let tableData = ref([]);

let keyword = ref("")
const toGetMessage = () => {
    if (keyword.value.trim() == "") return;
    toSearchAPI(keyword.value).then(res => {
        tableData.value = res.data;
    })
}


const dialogVisible = ref(false)

const handleClose = (done: () => void) => {
    dialogVisible.value = false;
    dataInfo.value = [];
}
</script>

<template>
    <el-dialog class=" h-[20rem] !w-[95%] md:!w-[35rem]" v-model="dialogVisible" title="真实信息"
        :before-close="handleClose">
        <div v-if="dialogVisible" class="  w-[100%] h-[15rem] p-4 rounded-md bg-slate-200">
            <div class=" flex flex-wrap justify-center h-full m-auto w-[90%] md:w-[80%]">
                <div class=" show-box">
                    <span class=" lable">姓名：</span><span class=" message">{{ dataInfo[0].name }}</span>
                </div>
                <div class=" show-box">
                    <span class=" lable">年龄：</span><span class=" message">{{ dataInfo[0].age }}</span>
                </div>
                <div class=" show-box">
                    <span class=" lable">性别：</span><span class=" message">{{ dataInfo[0].sex }}</span>
                </div>
                <div class=" show-box">
                    <span class=" lable">邮箱：</span><span class=" message">{{ dataInfo[0].email }}</span>
                </div>
                <div class=" show-box">
                    <span class=" lable">住址：</span><span class=" message">{{ dataInfo[0].address }}</span>
                </div>
                <div class=" show-box">
                    <span class=" lable">电话号码：</span><span class=" message">{{ dataInfo[0].phone }}</span>
                </div>
                <div class=" show-box">
                    <span class=" lable">身份证号码：</span><span class=" message">{{ dataInfo[0].idNumber }}</span>
                </div>
            </div>
        </div>
    </el-dialog>

    <div class=" w-full h-full p-4">
        <div class=" w-full h-full bg-slate-200 rounded-lg">
            <div @keydown.enter="toGetMessage" class="search-menu">
                <input v-model="keyword" placeholder="信息查询" type="text">
                <span class=" search-buttom">
                    <svg @click="toGetMessage" t="1713192464823" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="4271">
                        <path
                            d="M809.246403 771.926938 777.737782 803.458071 924.965961 950.667831 956.476629 919.157163Z"
                            fill="#1296db" p-id="4272"></path>
                        <path
                            d="M454.878536 70.285786C239.51556 70.285786 64.93236 244.847497 64.93236 460.231963c0 215.341486 174.583201 389.945153 389.945153 389.945153 215.362976 0 389.9472-174.603667 389.9472-389.945153C844.825736 244.847497 670.241512 70.285786 454.878536 70.285786zM454.878536 805.611108c-190.750415 0-345.381192-154.626683-345.381192-345.379145 0-190.751439 154.629753-345.380168 345.381192-345.380168 190.752462 0 345.382215 154.62873 345.382215 345.380168C800.259728 650.983401 645.630998 805.611108 454.878536 805.611108z"
                            fill="#1296db" p-id="4273"></path>
                    </svg>
                </span>
            </div>
            <div class=" w-full px-4 py-2 h-[calc(100%-4rem)] flex justify-center items-center">
                <el-table :data="filterTableData" style="width: 100%; height: 100%; border-radius: .4rem;">
                    <el-table-column label="姓名" prop="name" />
                    <el-table-column label="年龄" prop="age" />
                    <el-table-column label="性别" prop="sex" />
                    <el-table-column label="电话号码" prop="phone" />
                    <el-table-column label="身份证号码" prop="idNumber" />
                    <el-table-column label="邮箱" prop="email" />
                    <el-table-column label="住址" prop="address" />


                    <el-table-column align="right">
                        <template #header>
                            <el-input v-model="search" size="small" placeholder="Type to search" />
                        </template>
                        <template #default="scope">
                            <el-button type="danger" size="small"
                                @click="handleEdit(scope.$index, scope.row)">删除</el-button>
                            <el-button size="small" type="success"
                                @click="handleDelete(scope.$index, scope.row)">查看</el-button>
                        </template>
                    </el-table-column>
                </el-table>

            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.search-menu {
    width: 100%;
    height: 4rem;
    border-bottom: 1px solid #9c88ff;
    display: flex;
    justify-content: center;
    align-items: center;

    input {
        $ruler: 16px;
        $color-bg: #ebecf0;
        $color-shadow: #babecc;
        $color-white: #fff;

        display: flex;
        height: 1.5rem;
        width: 40vw;
        max-width: 17rem;
        min-width: 10rem;
        border: 0;
        outline: 0;
        font-size: $ruler;
        border-radius: $ruler * 20;
        padding: $ruler;
        background-color: $color-bg;
        text-shadow: 1px 1px 0 $color-white;
        box-shadow: inset 2px 2px 5px $color-shadow, inset -5px -5px 10px $color-white;
        box-sizing: border-box;
        transition: all 0.2s ease-in-out;
        appearance: none;
        -webkit-appearance: none;
        color: #777;

        &:focus {
            box-shadow: inset 1px 1px 2px $color-shadow,
                inset -1px -1px 2px $color-white;
        }
    }
}

.search-buttom {
    margin-left: .8rem;

    svg {
        width: 1.5rem;
        cursor: pointer;

        &:hover {
            path {
                fill: #6957c7;
            }
        }

        &:active {
            transform: scale(.9)
        }
    }
}


$ruler: 16px;
$color-bg: #ebecf0;
$color-shadow: #babecc;
$color-white: #fff;

.show-box {
    width: 100%;
    user-select: none;
    color: #999;

    display: flex;
    justify-content: left;
    align-items: center;
    position: relative;

    .lable {
        display: inline-block;
        width: 7rem;
    }

    .message {
        margin-left: 1rem;
        letter-spacing: .1rem;
    }
}
</style>